<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% 
    	String path = request.getContextPath();
    %>
   <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
   <c:set value="${pageContext.request.contextPath}" var="path"></c:set>
   
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国航天论坛</title>
<link href='http://fonts.googleapis.com/css?family=Muli:400,300,300italic,400italic' rel='stylesheet' type='text/css'>
<link href="<%= path %>/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="<%= path %>/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="<%= path %>/css/viewbox.css" rel="stylesheet" type="text/css" media="all" />
<link href="<%= path %>/css/hoverex-all.css" rel="stylesheet" type="text/css" media="all"/>
<link href="<%= path %>/css/portfolio.css" rel="stylesheet" type="text/css" media="all"/>
<link href="<%= path %>/css/style.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="<%= path %>/js/modernizr.custom.js"></script> 
 <script src="<%= path %>/js/jquery.min.js"></script>
</head>
<body>
	<div class="topbar-w3ls">
	<a href="index.jsp" class="logo"><h1>国家航天局</h1></a>	
	<div class="top-agileits">
		<form class="search-container" action="" method="post">
			<input id="search-box" type="text" class="search-box" name="q" placeholder="Search Here"/>	
			<input type="submit" id="search-submit" />
		</form>
			<style>
				.welcome{
					position: absolute;
					right:34px;
					top:15px;
				}
				.out a{
					position: absolute;
					right:27px;
					top:56px;
				    font-weight:bold;
				    font-size:15px;				    			    
				}
				
				
			
		</style>
		<c:if test="${not empty sessionScope.userinfo}">




			<span class="welcome"><a href="${path }/MyCollectionController?action=getMyCollection" class="userCentre"><img width="40"  src="<%= path %>/images/${userinfo.headerPic}"></a></span>


			<span class="out"><a href="${path }/UserinfoController?action=logout&referer=<%=request.getHeader("Referer") %>&url=<%=request.getRequestURL() %>">退出登录</a></span>
			
		</c:if>
		<c:if test="${empty sessionScope.userinfo}">
			<p><span><a class="login" href="${path}/web/userLogin.jsp">登录</a></span>/<span><a class="login" href="${path }/web/userRegister.jsp">注册</a></span></p>
		</c:if>
		<div class="clearfix"></div>
	</div>
</div>
<section class="banner">
	<div class="navbar-wrapper">
		<div class="container-fluid">
			<nav class="navbar navbar-inverse navbar-static-top">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="index.jsp" class="page-scroll">首页</a></li>
						<li><a href="#about" class="page-scroll">国际合作</a></li>
						<li><a href="#team" class="page-scroll">中国航天</a></li>
						<li><a href="#portfolio" class="page-scroll">精彩图集</a></li>
						<li><a href="#testimonial" class="page-scroll">航天英雄</a></li>
						<li><a href="<%= path %>/PostController?action=list" class="page-scroll">互动交流</a></li>
					</ul>
				</div>
			</nav>
		</div>
	</div>
	<div id="slideshow-banner">
		<ul>
		   
		    <!-- <li id="slideshow" class="slideshow-item"></li> -->
		    <!--   
			<li class="slideshow-item"><img src="<%= path %>/images/articleImages/3bfc7879-ae4c-460d-a55c-dd35dba16b5a.jpg" alt="" /></li>
			<li class="slideshow-item"><img src="<%= path %>/images/articleImages/5db62f6b-d595-45fa-a8a7-6ef02a8d81db.jpg" alt="" /></li>
			<li class="slideshow-item"><img src="<%= path %>/images/articleImages/74373946-a827-4ad9-9896-07e0aff6d761.jpg" alt="" /></li>
			-->
		</ul>
	</div>
	
	
	
<script type="text/javascript">
	
	$.ajax({
		url:"${path}/ConsultingArticleController",
		//请求的方式
		type:"post",
		//同步
		async:false,
		//映射或字符串值。规定连同请求发送到服务器的数据
		data:"action=consulting",
		//jquery中ajax的dataType属性用于指定服务器返回的数据类型(JSON类型)
		dataType:"json",
		success:function(datas){
			datas.forEach(function(imgin){
				    //ajax同步:六张照片一起执行           ajax异步:直接执行
				    
				  	var li = $('<li class="slideshow-item"><a href="${path}/ConsultingArticleController?action=findById&id='+imgin.id+'"><img src="<%= path %>/images/articleImages/'+imgin.pic+'" alt="" /></a></li>');
					$("#slideshow-banner").find("ul").append(li);		  	
			  
			  
			  })
		}
	});
	
	 	
</script>





</section>
<section class="about-w3ls" id="about">
	<div class="container-fluid">
		<div class="col-lg-6 col-md-6 col-sm-6 about-info1">
			<img src="<%= path %>/images/about-pic.png" class="mini img-responsive slideanim" alt="">
			<h2 class="w3layouts w3 w3l agileinfo slideanim"><a href="cooperation.jsp">国际合作</a></h2>
			<img src="<%= path %>/images/tanyue5.jpg" style="height:340px;width:700px" class="max img-responsive slideanim" alt="">
		</div>
		<div class="col-lg-6 col-md-6 col-sm-6 about-info2">
			<p class="about-p1 w3layouts w3 w3l agileinfo slideanim">国际合作是国际互动的一种基本形式。国际合作是指国际行为主体之间基于相互利益的基本一致或部分一致，而在一定的问题领域中所进行的政策协调行为。这种定义将合作（cooperation）和和谐（harmony）、冲突（conflict）或纠纷（discord）区别开来。</p>
			<p class="about-p1 wthree w3-agileits agileits-w3layouts agile w3-agile slideanim">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam velit nisl, ullamcorper eget elit vitae, vehicula consequat neque. Nunc sit amet orci at orci blandit dictum a sed diam.</p>
			<ul class="sides slideanim">
				<li><p><span class="fa fa-fighter-jet" aria-hidden="true"></span> <a href="${path }/web/organization.jsp">国际组织.</a></p></li>
				<li><p><span class="fa fa-fighter-jet" aria-hidden="true"></span> <a href="${path }/web/cooperation.jsp">国际合作.</a></p></li>
			</ul>
		</div>
		<div class="clearfix"></div>
	</div>
</section>
<section class="team-w3ls slideanim" id="team">
	<div class="container">
		<h3 class="slideanim"><a href="javascript:void(0)">中国航天</a></h3>
		<p class="text-header wthree w3-agileits agileits-w3layouts agile w3-agile slideanim">CN space</p>
		<div class="col-lg-4 col-md-4 col-sm-4 team-agile1">
			<div class="team-info">
				<a href="/spacesys/web/mission.jsp"><img src="<%= path %>/images/009.jpg" style="height:345px" alt="" class="img-responsive slideanim"></a>
				<div class="team-details slideanim">
					<h4 class="slideanim"><a href="${path }/web/mission.jsp">重大任务</a></h4>
					<p class="team-p1 slideanim">太空之上镌刻“中国精度”</p>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-4 team-agile2">
			<div class="team-info">
				<a href="/spacesys/web/product.jsp"><img src="<%= path %>/images/321.jpg" style="height:345px" alt="" class="img-responsive slideanim"></a>
				<div class="team-details slideanim">
					<h4 class="slideanim"><a href="${path }/web/product.jsp">宇航产品</a></h4>
					<p class="team-p1 slideanim">长征四号丙（CZ-4C）成功发射</p>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-4 team-agile3">
			<div class="team-info">
				<a href="/spacesys/web/science.jsp"><img src="<%= path %>/images/1121.jpg" style="height:345px" alt="" class="img-responsive slideanim"></a>
				<div class="team-details slideanim">
					<h4 class="slideanim"><a href="${path }/web/science.jsp">空间科学</a></h4>
					<p class="team-p1 slideanim">撰写中国航天科学前进的每一步</p>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="portfolio-w3ls" id="portfolio">
	<div class="container">
		<h3 class="slideanim">精彩图集</h3>
		<p class="text-header slideanim">感受中国力量</p>
	</div>
	 <div id="portfoliowrap" class="slideanim">
        <div class="portfolio-centered">
            <div class="recentitems portfolio" >

			
			<%-- <div class="portfolio-item graphic-design">
                    <div class="he-wrap tpl6">
					<img src="<%= path %>/images/port2.jpg" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
                                <a href="<%= path %>/images/port2.jpg" class="dmbutton a2 thumbnail" data-animate="fadeInUp" title="Literati"><i class="fa fa-search"></i></a>
                        	</div><!-- he bg -->
						</div><!-- he view -->		
					</div><!-- he wrap -->
				</div><!-- end col-12 --> --%>
				
				
            </div>
        </div>
	 </div>
</section>



<script type="text/javascript">
$.ajax({
	url:"${path}/ConsultingArticleController",
	type:"get",
	dataType:"json",
	async:false,
	data:"action=findAllPhoto",
	success:function(mes){
		mes.forEach(function(photos){
							var s = '<div class="portfolio-item graphic-design" >'+
							 '<div class="he-wrap tpl6">'+
						 '<img src="<%= path %>/images/'+photos.pic+'" alt="">'+  
							'<div class="he-view">'+
								'<div class="bg a0" data-animate="fadeIn">'+
									'<a href="<%= path %>/images/'+photos.pic+'" class="dmbutton a2 thumbnail" data-animate="fadeInUp" title="Literati"><i class="fa fa-search"></i></a>'+
				          	'</div>'+
							'</div>'+
						'</div>'+
					'</div>';
					
					$(".recentitems").append(s);	
		});
	}
});

</script>



<section class="stats-agileits" id="stats">
	<div class="container">
		<h3 class="slideanim">航天成就</h3>
		<p class="text-header slideanim">航天发展实录</p>	
		<div class="stats-grid stats-grid-1 slideanim">
			<div class="numscroller" data-slno='1' data-min='0' data-max='158' data-delay='3' data-increment="1">85</div>
			<h4>火箭发射数量</h4>
		</div>
		<div class="stats-grid stats-grid-2 slideanim">
			<div class="numscroller" data-slno='1' data-min='0' data-max='63' data-delay='3' data-increment="1">95</div>
			<h4>卫星发射数量</h4>
		</div>
		<div class="stats-grid stats-grid-3 slideanim">
			<div class="numscroller" data-slno='1' data-min='0' data-max='421' data-delay='3' data-increment="1">80</div>
			<h4>飞船发射数量</h4>
		</div>
		<div class="stats-grid stats-grid-4 slideanim">
			<div class="numscroller" data-slno='1' data-min='0' data-max='200' data-delay='3' data-increment="1">10</div>
			<h4>发射失败数量</h4>
		</div>
		<div class="clearfix"></div>
	</div>

</section>




	<section class="test-w3ls slideanim" id="testimonial">
	<div class="container">
		<a href="<%=path %>/ArticleController?action=spacehero"><h3 class="slideanim">航天英雄</h3></a>
		<p class="text-header slideanim">太空之上镌刻“中国精度”.</p>
		<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
			<!-- Indicators -->
			<!--  
			<ol class="carousel-indicators slideanim">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			-->
			<!-- Wrapper for slides -->
			<div class="carousel-inner slideanim" role="listbox">
				<div class="item active">
					<div class="test-agile">
						<div class="col-lg-4 col-md-4 col-sm-4 test-info1">
							<img src="${path }/images/test-img1.jpg" class="img-responsive" id="hengtian"  alt="">
							
						</div>
						<div class="col-lg-8 col-md-8 col-sm-8 test-info2">
							<p class="test-p1">从数据库里取到人物的信息.<span class="line-w3ls"></span></p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="item">
					<div class="test-agile">
						<div class="col-lg-4 col-md-4 col-sm-4 test-info1">
							<img src="${path }/images/test-img2.jpg" class="img-responsive" alt="">
						</div>
						<div class="col-lg-8 col-md-8 col-sm-8 test-info2">
							<p class="test-p1"><span class="line-w3ls"></span></p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="item">
					<div class="test-agile">
						<div class="col-lg-4 col-md-4 col-sm-4 test-info1">
							<img src="${path }/images/test-img222.jpg" class="img-responsive" alt="">
						</div>
						<div class="col-lg-8 col-md-8 col-sm-8 test-info2">
							<p class="test-p1"><span class="line-w3ls"></span></p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!--   
			<!-- Left and right controls 
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>
	-->
</section>

 <!--  
	<div id="slideshow-banner" class="c" style="border:1px solid red;">
		<ul>
		   
		    <li id="slideshow" class="slideshow-item"></li> 
		      
			<%-- <li class="slideshow-item"><img src="<%= path %>/images/222.jpg" alt="" /></li>
			<li class="slideshow-item"><img src="<%= path %>/images/223.jpg" alt="" /></li>
			<li class="slideshow-item"><img src="<%= path %>/images/224.jpg" alt="" /></li> --%>
		
		</ul>
	</div>

-->

<script type="text/javascript">
	
	$.ajax({
		url:"${path}/ArticleController",
		
		//请求的方式
		type:"post",
		//同步
		async:false,
		//映射或字符串值。规定连同请求发送到服务器的数据
		data:"action=consulting",
		//jquery中ajax的dataType属性用于指定服务器返回的数据类型(JSON类型)
		dataType:"json",//接森
		success:function(datas){
			datas.forEach(function(mes){
				  	$("#hengtian").attr("src","${path}/images/articleImages/"+mes.pic);
				
				  	$("#hengtian").attr("src","${path}/images/"+mes.pic);
			  		  $(".test-p1").html(mes.content);
			  		//$("#hengtian").css("width","200px");
			  		//$("#hengtian").css("height","200px");
			  })
		}
	});
	
	
	 	
</script>






















<section class="footer">
	<div class="container">
		<div class="copyright">
			<p>版权所有：国家航天局 &copy; 国家航天局新闻宣传中心 </p>
		</div>
	</div>
</section>
<a href="#0" class="cd-top">Top</a>

<script src="<%= path %>/js/bootstrap.min.js"></script>
<script src="<%= path %>/js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="<%= path %>/js/numscroller-1.0.js"></script>
<script src="<%= path %>/js/index.js"></script>
<script type="text/javascript" src="${path }/js/jquery-3.6.0.min.js""></script>
<script type="text/javascript" src="<%= path %>/js/jquery.slide.js"></script>



<script type="text/javascript">
	$('#slideshow-banner').slide({
		cdTime : 5000,      
	    controllerLeftButton : "/spacesys/images/left.png",    
	    controllerRightButton : "/spacesys/images/right.png"   
	});
</script>
<script src="<%= path %>/js/jquery.easing.min.js"></script>
<script src="<%= path %>/js/grayscale.js"></script>
<script src="<%= path %>/js/main.js"></script>
<script src="<%= path %>/js/jquery.viewbox.min.js"></script>
<script>
		$(function(){
			
			$('.thumbnail').viewbox();
			$('.thumbnail-2').viewbox();
			
			(function(){
				var vb = $('.popup-link').viewbox();
				$('.popup-open-button').click(function(){
					vb.trigger('viewbox.open');
				});
				$('.close-button').click(function(){
					vb.trigger('viewbox.close');
				});
			})();
			
			(function(){
				var vb = $('.popup-steps').viewbox({navButtons:false});
				
				$('.steps-button').click(function(){
					vb.trigger('viewbox.open',[0]);
				});
				
				$('.next-button').click(function(){
					vb.trigger('viewbox.open',[1]);
				});
				$('.prev-button').click(function(){
					vb.trigger('viewbox.open',[0]);
				});
				$('.ok-button').click(function(){
					vb.trigger('viewbox.close');
				});
			})();
			
		});
</script>
<!--script src="js/jquery.hoverdir.js"></script!-->
<script src="<%= path %>/js/jquery.hoverex.min.js"></script>
<script src="<%= path %>/js/jquery.isotope.min.js"></script>
<script>
// Portfolio
(function($) {
	"use strict";
	var $container = $('.portfolio'),
		$items = $container.find('.portfolio-item'),
		portfolioLayout = 'fitRows';
		
		if( $container.hasClass('portfolio-centered') ) {
			portfolioLayout = 'masonry';
		}
				
		$container.isotope({
			filter: '*',
			animationEngine: 'best-available',
			layoutMode: portfolioLayout,
			animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false
		},
		masonry: {
		}
		}, refreshWaypoints());
		
		function refreshWaypoints() {
			setTimeout(function() {
			}, 1000);   
		}
				
		$('nav.portfolio-filter ul a').on('click', function() {
				var selector = $(this).attr('data-filter');
				$container.isotope({ filter: selector }, refreshWaypoints());
				$('nav.portfolio-filter ul a').removeClass('active');
				$(this).addClass('active');
				return false;
		});
		
		function getColumnNumber() { 
			var winWidth = $(window).width(), 
			columnNumber = 1;
		
			if (winWidth > 1200) {
				columnNumber = 5;
			} else if (winWidth > 950) {
				columnNumber = 4;
			} else if (winWidth > 600) {
				columnNumber = 3;
			} else if (winWidth > 400) {
				columnNumber = 2;
			} else if (winWidth > 250) {
				columnNumber = 1;
			}
				return columnNumber;
			}       
			
			function setColumns() {
				var winWidth = $(window).width(), 
				columnNumber = getColumnNumber(), 
				itemWidth = Math.floor(winWidth / columnNumber);
				
				$container.find('.portfolio-item').each(function() { 
					$(this).css( { 
					width : itemWidth + 'px' 
				});
			});
		}
		
		function setPortfolio() { 
			setColumns();
			$container.isotope('reLayout');
		}
			
		$container.imagesLoaded(function () { 
			setPortfolio();
		});
		
		$(window).on('resize', function () { 
		setPortfolio();          
	});
})(jQuery);
</script>
<script>
$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
</script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>
</html>


 





 






 